<template>
	<view class="background">
		<view>
			<view class="title">
				<text>发票详情</text>
			</view>
			<view class="passenger-info">
				<view class="from-item">
					<text class="require">*</text>
					<text style="width: 130upx;">单位名称</text>
					<input v-model="companyName" placeholder="与营业执照名称一致" placeholder-class="pcs"/>
				</view>
				<view class="from-item">
					<text class="require">*</text>
					<text style="width: 130upx;">税号</text>
					<input v-model="taxpayerNumber" placeholder="纳税人识别号(机构地址)" placeholder-class="pcs"/>
				</view>
				<view class="from-item">
					<text class="require">*</text>
					<text style="width: 130upx;">邮箱</text>
					<input v-model="email" placeholder="请输入邮箱" placeholder-class="pcs"/>
				</view>
				<view class="from-item">
					<text class="require" style="opacity: 0;">*</text>
					<text style="width: 130upx;">详细地址</text>
					<input v-model="companyAddress" placeholder="请输入" placeholder-class="pcs"/>
				</view>
				<view class="from-item">
					<text class="require" style="opacity: 0;">*</text>
					<text style="width: 130upx;">联系电话</text>
					<input v-model="phone" placeholder="请输入正确的手机号" maxlength="11" placeholder-class="pcs"/>
				</view>
				<view class="from-item">
					<text class="require" style="opacity: 0;">*</text>
					<text style="width: 130upx;">开户行</text>
					<input v-model="openBank" placeholder="请输入开户银行" placeholder-class="pcs"/>
				</view>
				<view class="from-item">
					<text class="require" style="opacity: 0;">*</text>
					<text style="width: 130upx;">账户</text>
					<input v-model="accountBank" placeholder="请输入银行账户" placeholder-class="pcs"/>
				</view>
			</view>
		</view>
		<view class="bottom-view">
			<view @tap="submit()" class="bottom-btn">
				<text>提交电子发票</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api';
	export default {
		data() {
			return {
				companyName: '',
				taxpayerNumber: '',
				email: '',
				phone:'',
				accountBank:'',
				openBank:'',
				companyAddress:'',
				id:''
			}
		},
		onLoad(option) {
			if(option.ticketId !== 'undefined') {
				uni.setNavigationBarTitle({ title: '编辑开票信息' });
				this.getTicketDetail(option.ticketId);
			} 
			else {
				uni.setNavigationBarTitle({ title: '添加开票信息' });
			}
		},
		methods: {
			async getTicketDetail(id) {
				const { code, data } = await api.ticket.getTicketDetail({id});
				if(code === 200) {
					this.id = data?.id;
					this.companyName = data?.companyName;
					this.taxpayerNumber = data?.taxpayerNumber;
					this.email = data?.email;
					this.phone = data?.phone;
					this.accountBank = data?.accountBank;
					this.openBank = data?.openBank;
					this.companyAddress = data?.companyAddress;
				}
				
			},
			
			async submit() {
				if(!this.companyName) {
					uni.showToast({
						title: '请输入发票抬头',
						duration: 1500,
						icon: "error",
					});
					return
				}
				
				if(!this.taxpayerNumber){
					uni.showToast({
						title: '请输入税号',
						duration: 1500,
						icon: "error",
					});
					return
				}
				
				if(!this.email){
					uni.showToast({
						title: '请输入邮箱',
						duration: 1500,
						icon: "error",
					});
					return
				}
				
				if(!this.validateMail(this.email)){
					uni.showToast({
						title: '请输入正确的邮箱',
						duration: 1500,
						icon: "error",
					});
					return
				}
				
				const parameter = {
					companyName: this.companyName,
					taxpayerNumber: this.taxpayerNumber,
					email: this.email,
					phone: this.phone,
					accountBank: this.accountBank,
					openBank: this.openBank,
					companyAddress: this.companyAddress,
					id: this.id
				}
				
				if(this.id) {
					const {code, data} = await api.ticket.updateTicket(parameter);
					if(code == 200) {
						uni.showToast({
							title: '编辑成功',
							duration: 1500
						});
						const pages = getCurrentPages(); //页面栈
						const prePage = pages[pages.length - 2]; //上一页
						prePage.$vm.getTicketList(); //触发上一页监听器
						uni.navigateBack()
					}
					else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: "error",
						});
					}
					return ;
				}
				
				const {code, data} = await api.ticket.addTicket(parameter);
				if(code == 200) {
					uni.showToast({
						title: '添加成功',
						duration: 1500
					});
					const pages = getCurrentPages(); //页面栈
					const prePage = pages[pages.length - 2]; //上一页
					prePage.$vm.getTicketList(); //触发上一页监听器
					uni.navigateBack();
				}
				else{
					uni.showToast({
						title: '添加失败',
						duration: 1500,
						icon: "error",
					});
				}
			},
			
			validateMail(mail){//校验邮箱
			  if(mail) {
			    const strRegex = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
			    if(!strRegex.test(mail)) {
			      return false;
			    }
			  }
			  return true;
			},
		}
	}
</script>

<style lang="scss">
	.background {
		height: 100%;
		background: #F7F7F7;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20upx;
		}
		.passenger-info {
			background: #ffffff;
			border-radius: 16upx;
			padding: 20upx;
			margin: 20upx;
			.from-item {
				display: flex;
				height: 100upx;
				flex-direction: row;
				align-items: center;
				border-bottom: solid 1upx #EFEFEF;
				.require{
					color: red;
				}
				.pcs {
					color: #C9CACC;
					font-size: 32rpx;
				}
				input {
					margin-left: 10upx;
					flex: 1;
				}
				text {
					color: #5E6166;
					font-size: 32rpx;
				}
			}
		}
		.bottom-view {
			height: 150upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			background: #FFFFFF;
			.bottom-btn {
				width: 90%;
				margin-top: 10upx;
				height: 100upx;
				border-radius: 16upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #2697FF;
				color: #FFFFFF;
			}
		}
	}
</style>
